<template>
  <div>
    <div class="empty" v-if="!show">
      <!-- <img src="../../public/images/order_empty.jpg" alt="" /> -->
      <div class="tips">您还没有历史订单哟</div>
      <van-button round color="#a7d500">去点餐</van-button>
    </div>
    <div v-else>
      <order-product-card /><order-product-card /><order-product-card /><order-product-card /><order-product-card />
    </div>
  </div>
</template>

<script>
import OrderProductCard from "./OrderProductCard.vue";
export default {
  components: { OrderProductCard },
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style scoped>
.empty {
  width: 100%;
  text-align: center;
  position: relative;
}
.empty > img {
  display: block;
  margin: 20vw auto;
  width: 40vw;
}
.empty .tips {
  width: 100%;
  position: absolute;
  top: 42vw;
  text-align: center;
}
::v-deep .van-button {
  width: 40vw !important;
  color: #666 !important;
}
</style>